<template>
  <div class="export-dialog-view">
    <div class="export-dialog">
      <div class="title">
        <p>出力内容（{{ title }}）</p>
        <i class="el-icon-close" @click="$emit('CloseExprotDiloag')"></i>
      </div>
      <div class="export-dialog-body">
        <div class="message">
          <div class="item">
            <span class="label">{{ $t("message.bhView.label.Plant") }}</span>
            <span class="detail" v-if="title != $t('message.environmentSetting.export.title_2') &&
              title != $t('message.environmentSetting.export.title_3') &&
              title != $t('message.environmentSetting.export.title_4') &&
              title != $t('損傷発生条件表') &&
              title != $t('引張許容応力表')
            ">{{ $store.state.excelPlantName }}</span>
            <span class="detail" v-else>-</span>
          </div>
          <div class="item">
            <span class="label">{{
              $t("message.bhView.label.classification")
            }}</span>
            <span class="detail" v-if="title != $t('message.environmentSetting.export.title_2') &&
              title != $t('message.environmentSetting.export.title_3') &&
              title != $t('message.environmentSetting.export.title_4') &&
              title != $t('損傷発生条件表') &&
              title != $t('引張許容応力表')
            ">{{
              $store.state.excelMacType == "1"
                ? $t("message.bhView.leftComponents.machine")
                : $t("message.bhView.leftComponents.piping")
            }}</span>
            <span class="detail" v-else>-</span>
          </div>
          <div class="item">
            <span class="label">内容：</span>
            <span class="detail">{{
              radioTow == "2"
                ? $t("message.environmentSetting.export.label_5")
                : $t("message.environmentSetting.export.label_6")
            }}</span>
          </div>
        </div>
        <!-- diaolg-1 -->
        <!-- 取替登录 -->
        <div class="change-time" v-if="title === $t('message.environmentSetting.export.title_32')">
          <div class="item">
            <span class="label">取替後初期値シート出力有無</span>
          </div>
          <div class="item">
            <span class="label" style="margin-right: 16px; min-width: 182px">
              <el-radio v-model="ExportType" :label="1">出力する</el-radio>
            </span>
            <span class="label">
              <el-radio v-model="ExportType" :label="2">出力しない</el-radio>
            </span>
          </div>
        </div>

        <div class="change-time" v-if="(title === $t('message.environmentSetting.export.title_22') &&
          radioTow == '2') ||
          (title === $t('message.environmentSetting.export.title_31') &&
            radioTow == '2')
        ">
          <div class="item">
            <span class="label">出力対象</span>
          </div>
          <div class="item">
            <span class="label" style="margin-right: 16px; min-width: 182px">
              <el-radio v-model="actuKbn" :label="1" @change="changeDate">計画のみ</el-radio>
            </span>
            <span class="label">
              <el-radio v-model="actuKbn" :label="0" @change="changeDate">全データ</el-radio>
            </span>
          </div>
          <div class="item">
            <p class="select-view">
              <span class="label">出力期間</span>
              <el-date-picker v-model="begionDate" type="month" class="select-ipt pl20"
                :class="actuKbn == 0 || actuKbn == 1 ? 'orange' : ''" value-format="yyyy-MM">
              </el-date-picker>
            </p>
            <p class="select-view">
              <span class="label">から</span>
              <el-date-picker v-model="endDate" type="month" class="select-ipt  pl20"
                :class="actuKbn == 0 || actuKbn == 1 ? 'orange' : ''" value-format="yyyy-MM">
              </el-date-picker>
            </p>
          </div>
        </div>

        <div class="change-time" v-if="(title === $t('message.environmentSetting.export.title_30') &&
          radioTow == '2')">
          <div class="item">
            <span class="label">出力対象</span>
          </div>

          <div class="item">
            <span class="label  w-50">検査位置</span>
            <el-select v-model="EmitData30.InspectPosition" class="select-ipt" style="margin: 0 8px 0 16px"
              placeholder=" ">
              <el-option v-for="item in Data30.inspectPosition" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
            </el-select>
            <span class="label w-50 ">位置No</span>
            <el-input class="select-ipt" style="margin: 0 8px 0 16px" v-model="EmitData30.PositionNo"
              @input="EmitData30.PositionNo = Number($setMyNum(EmitData30.PositionNo, '3 - 0'))"></el-input>
          </div>

          <div class="item">
            <span class="label  w-50">検査目的</span>
            <el-select v-model="EmitData30.InspectAim" class="select-ipt" style="margin: 0 8px 0 16px" placeholder=" ">
              <el-option v-for="item in Data30.inspectAim" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
            </el-select>

            <span class="label w-50 ">検査面</span>
            <el-input class="select-ipt" style="margin: 0 8px 0 16px" v-model="EmitData30.InspectFace"
              @input="EmitData30.InspectFace = $setMaxLength(EmitData30.InspectFace, 12)"></el-input>

          </div>
        </div>

        <div class="change-time" v-if="(title === $t('message.environmentSetting.export.title_34') &&
          radioTow == '2')">
          <div class="item">
            <span class="label">出力対象</span>
          </div>

          <div class="item">
            <span class="label w-50">検査位置</span>
            <el-select v-model="EmitData30.InspectPosition" class="select-ipt" style="margin: 0 8px 0 16px"
              placeholder=" ">
              <el-option v-for="item in Data30.inspectPosition" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
            </el-select>

            <span class="label w-50 ">ポイントNo.</span>
            <el-input class="select-ipt" style="margin: 0 8px 0 16px" v-model="EmitData30.PositionNo"
              @input="EmitData30.PositionNo = Number($setMyNum(EmitData30.PositionNo, '3 - 0'))"></el-input>
          </div>

          <div class="item">
            <span class="label w-50">検査工事項目</span>
            <el-select v-model="EmitData30.InspectAim" class="select-ipt" style="margin: 0 8px 0 16px" placeholder=" ">
              <el-option v-for="item in Data30.inspectAim" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
            </el-select>

            <span class="label w-50 ">グループ名</span>
            <el-input class="select-ipt" style="margin: 0 8px 0 16px" v-model="EmitData30.InspectFace"
              @input="EmitData30.InspectFace = $setMaxLength(EmitData30.InspectFace, 12)"></el-input>
          </div>
        </div>

        <!-- diaolg-2 -->
        <div class="change-time" v-if="title == $t('message.environmentSetting.export.title_26')">
          <div class="item">
            <span class="label">寿命評価基準年</span>
            <el-select v-model="operDate" class="select-ipt" style="margin: 0 8px 0 16px" placeholder=" ">
              <el-option v-for="item in LifeAssBaseDate" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="change-time" v-if="title == $t('message.environmentSetting.export.title_26')">
          <div class="item">
            <span class="label">出力対象</span>
          </div>
          <div class="item">
            <span class="label" style="margin-right: 16px; min-width: 182px">
              <el-radio v-model="exportObjTest" :label="1">計画のみ</el-radio>
            </span>
            <span class="label">
              <el-radio v-model="exportObjTest" :label="2">全データ</el-radio>
            </span>
          </div>
          <div class="item">
            <p class="select-view" style="margin-right: 6px">
              <span class="label">出力開始年月</span>
              <el-date-picker v-model="exportBegYear" type="month" class="select-ipt pl20"
                :class="exportObjTest == 1 ? 'orange' : ''" :disabled="exportObjTest == 2" :value-format="timeFormat"
                :format="timeFormat">
              </el-date-picker>
            </p>
            <span>~</span>
            <p class="select-view">
              <el-date-picker v-model="exportPeriod" type="month" class="select-ipt pl20"
                :class="exportObjTest == 1 ? 'orange' : ''" :disabled="exportObjTest == 2" :value-format="timeFormat"
                :format="timeFormat">
              </el-date-picker>
            </p>
          </div>
        </div>

        <div class="change-time" v-if="title == $t('message.environmentSetting.export.title_26')"> 
          <div class="item">
            <span class="label">実施日指定有無</span>
          </div>
          <div class="item">
            <span class="label" style="margin-right: 16px">
              <el-radio v-model="impDateType" :label="1" @change="impDate = ''">しない</el-radio>
            </span>
            <span class="label" style="margin-right: 16px">
              <el-radio v-model="impDateType" :label="2" @change="impDate = ''">当年</el-radio>
            </span>
            <span class="label" style="margin-right: 16px">
              <el-radio v-model="impDateType" :label="3">する</el-radio>
            </span>
            <el-date-picker v-model="impDate" type="date" :class="impDateType == 3 ? 'orange' : ''"
              class="select-ipt pl20" :value-format="yyyy - MM - dd" :format="yyyy - MM - dd"
              :disabled="impDateType != 3">
            </el-date-picker>
          </div>
        </div>

        <div class="change-time" v-if="title == $t('message.environmentSetting.export.title_26')">
          <div class="item">
            <p class="select-view">
              <span class="label">検査方法</span>
              <el-select v-model="ispWayType" class="select-ipt" placeholder=" ">
                <el-option v-for="item in checkMethodList" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
              </el-select>
            </p>
            <p class="select-view">
              <span class="label">方位名称</span>
              <el-input v-model="msrPnt" class="select-ipt" @input="msrPnt = $setMaxLength(msrPnt, 20)"> </el-input>
            </p>
          </div>
        </div>

        <div class="change-time" v-if="title == $t('message.environmentSetting.export.title_26')">
          <div class="item">
            <span class="label">検査区分</span>
          </div>
          <el-checkbox-group v-model="insDistinguish" class="group-view">
            <el-checkbox v-for="i in checkDist" :key="i.key" :label="i.label">
              <el-input v-model="i.key" class="select-ipt" readonly></el-input>
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="change-time" v-if="title == $t('message.environmentSetting.export.title_26')">
          <div class="item">
            <span class="label">測定誤差アラーム値</span>
            <el-input v-model="measureEval" class="select-ipt orange" style="margin: 0 8px 0 16px"
              @input="measureEval = $setMyNum(measureEval, '1 - 2')">
            </el-input>
            <span>mm</span>
          </div>
        </div>

        <!-- diaolg-3 -->
        <!-- <div class="change-time" v-if="title == $t('message.environmentSetting.export.title_13')">
          <div class="item">
            <span class="label">出力対象</span>
          </div>
          <div class="item">
            <span class="label" style="margin-right: 16px; min-width: 182px">
              <el-radio v-model="exportObj" :label="1">最新世代のみ</el-radio>
            </span>
            <span class="label">
              <el-radio v-model="exportObj" :label="2">全世代（編集のみ）</el-radio>
            </span>
          </div>
        </div> -->

        <p class="tip">上記の内容で良いですか?</p>
        <div class="footer">
          <el-button @click="
            title === $t('message.environmentSetting.export.title_22')
              ? ($emit('CloseExprotDiloag'),
                (actuKbn = 1),
                (begionDate = ''),
                (endDate = ''))
              : $emit('CloseExprotDiloag')
            ">
            Cancel
          </el-button>
          <el-button type="primary" v-if="title === $t('message.environmentSetting.export.title_13')"
            @click="thickMeatStyle">
            OK
          </el-button>
          <el-button type="primary" v-else-if="title === $t('message.environmentSetting.export.title_26')
          " @click="thickCheckRes">
            OK
          </el-button>
          <el-button type="primary" v-else @click="
            (title === $t('message.environmentSetting.export.title_22') &&
              radioTow == '2') ||
              (title === $t('message.environmentSetting.export.title_31') &&
                radioTow == '2') || (title === $t('message.environmentSetting.export.title_30') &&
                  radioTow == '2') || (title === $t('message.environmentSetting.export.title_34') &&
                    radioTow == '2') || (title === $t('message.environmentSetting.export.title_17') &&
                      radioTow == '2')
              ? OtherTypesClickSave()
              : $emit('ExprotItem', title)
            ">
            OK
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCheckDist,
  getCheckMethod,
  getErrorVal,
  GetThickDeterResLifeAssBaseDate,
  InspectionPlanCommbox,
  GetExportCGOperationDetialsCombox
} from "@/api/api";
import timeFormat from "@/utils/timeFormat";
import { showLoading, hideLoading } from "@/utils/loading";
export default {
  props: ["title", "radioTow"],
  name: "ExportDialog",
  data() {
    return {
      Data30: {},
      EmitData30: {
        InspectPosition: null,
        PositionNo: null,
        InspectAim: null,
        InspectFace: '',
      },
      timeFormat: timeFormat(),
      actuKbn: 0,
      actuKbnTest: 1,
      options: [],
      begionDate: `${new Date().getFullYear() - 1}-${new Date().getMonth() + 1}`,
      endDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
      valueYear: "",
      valueDay: "",
      picker: "",
      insDistinguish: [],
      test: [],
      operDate: "",
      exportBegYear: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
      exportPeriod: `${new Date().getMonth() == 11 ? new Date().getFullYear() + 1 : new Date().getFullYear()}-${new Date().getMonth() == 11 ? '01' : new Date().getMonth() + 2}`,
      impDateType: 1,
      impDate: "",
      checkDist: [],
      exportObj: 1,
      checkMethodList: [],
      measureEval: "",
      msrPnt: "",
      LifeAssBaseDate: [],
      exportObjTest: 2,
      ispWayType: "",
      ExportType: 2,
    };
  },
  components: {},
  watch: {},
  methods: {
    changeDate(e) {
      console.log(e);
      let year = new Date().getFullYear();
      let month =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;

      if (e == 0) {
        this.begionDate = `${year - 1}-${month}`;
        this.endDate = `${year}-${month}`;
      } else {
        this.begionDate = `${year}-${month}`;
        this.endDate = `${year + 1}-${month}`;
      }
    },
    OtherTypesClickSave() {
      this.$emit("ExprotItem", {
        title: this.title,
        actuKbn: this.actuKbn,
        begionDate: this.begionDate,
        endDate: this.endDate,
        ...this.EmitData30
      });
      // 以下为之前，改为后端判断日期
      return
    },
    thickMeatStyle() {
      this.$emit("ExprotItem", {
        title: this.title,
        exportObj: this.exportObj,
      });
    },
    thickCheckRes() {
      this.$emit("ExprotItem", {
        title: this.title,
        operDate: this.operDate,
        exportObj: this.exportObjTest,
        exportBegYear: this.exportBegYear,
        exportPeriod: this.exportPeriod,
        impDateType: this.impDateType,
        impDate: this.impDate,
        ispWayType: this.ispWayType,
        msrPnt: this.msrPnt,
        insDistinguish: this.insDistinguish,
        measureEval: this.measureEval,
      });
    },
    getCheckDistApi() {
      getCheckDist().then((res) => {
        // console.log(res,'getCheckDistApi')
        this.checkDist = [];
        if (res.data.code != 0) {
          return;
        }
        this.checkDist = res.data.data;
      });
    },
    getCheckMethodApi() {
      getCheckMethod().then((res) => {
        this.checkMethodList = [];
        if (res.data.code != 0) {
          return;
        }
        this.checkMethodList = res.data.data;
      });
    },
    getErrorValApi() {
      getErrorVal().then((res) => {
        this.measureEval = "";
        if (res.data.code != 0) {
          return;
        }
        this.measureEval = res.data.data;
      });
    },
    getLifeAssBaseDateApi() {
      showLoading();
      let dataJson = {
        PltCode: this.$store.state.pltCode,
      };
      GetThickDeterResLifeAssBaseDate(dataJson).then((res) => {
        hideLoading();
        if (res.data.code != 0) {
          return;
        }
        res.data.data.forEach((dateItem) => {
          this.LifeAssBaseDate.push({
            label: dateItem,
            value: dateItem,
          });
        });
        this.operDate = this.LifeAssBaseDate[6].value;
      });
    },
    InspectionPlanCommboxFn() {
      showLoading();
      let dataJson = {
        PltCode: this.$store.state.pltCode,
      };
      InspectionPlanCommbox(dataJson).then((res) => {
        hideLoading();
        if (res.data.code != 0) {
          return;
        }
        this.Data30 = res.data.data;
      });
    },
    GetExportCGOperationDetialsComboxFn() {
      showLoading();
      let dataJson = {
        PltCode: this.$store.state.pltCode,
      };
      GetExportCGOperationDetialsCombox(dataJson).then((res) => {
        hideLoading();
        if (res.data.code != 0) {
          return;
        }
        this.Data30 = res.data.data;
      });
    },
  },
  created() {
    if (this.title == this.$t("message.environmentSetting.export.title_30")) {
      this.InspectionPlanCommboxFn();
      return
    }
    if (this.title == this.$t("message.environmentSetting.export.title_34")) {
      this.GetExportCGOperationDetialsComboxFn();
      return
    }
    if (this.title != this.$t("message.environmentSetting.export.title_26"))
      return;
    this.getCheckDistApi();
    this.getCheckMethodApi();
    this.getErrorValApi();
    this.getLifeAssBaseDateApi();



  },
  mounted() {
  },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.export-dialog-view {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 6;
}

.export-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 514px;
  padding-bottom: 24px;
  // height: 292px;
  background: #ffffff;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
    0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);

  .title {
    // width: 100%;
    height: 42px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    font-size: 16px;

    p {
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
    }

    .el-icon-close {
      cursor: pointer;
    }
  }

  .export-dialog-body {
    width: 100%;
    height: calc(100% - 42px);

    .message {
      height: 129px;
      border-bottom: 1px solid #f0f0f0;
      margin: 0 24px;

      .item {
        width: 100%;
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .label {
          min-width: 60px;
          height: 100%;
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }

    .change-time {
      margin: 0 24px;
      padding: 16px 0 0 0;
      border-bottom: 1px solid #f0f0f0;

      .item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 16px;

        .label {
          // min-width: 60px;
          height: 100%;
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
        }

        .select-view {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-right: 16px;
        }

        ::v-deep .el-radio__input.is-checked+.el-radio__label {
          font-weight: bold;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
        }

        .select-ipt {
          width: 125px;
          height: 24px;
          margin-left: 6px;

          ::v-deep .el-input__inner {
            width: 125px;
            height: 24px;
            padding-right: 5px;
            padding-left: 10px;
          }

          ::v-deep .el-input__icon {
            line-height: 24px !important;
          }

          ::v-deep .el-input__prefix {
            left: 0;
          }
        }

        .bg {
          ::v-deep .el-input__inner {
            background: #ffffe1;
          }
        }
      }

      .group-view {
        width: 100%;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 16px;

        .el-checkbox {
          margin-left: 8px;
        }

        .select-ipt {
          width: 110px;
          height: 24px;
          margin-left: 4px;

          ::v-deep .el-input__inner {
            width: 110px;
            height: 24px;
            padding-right: 5px;
            padding-left: 20px;
            background: #ffffe1;
          }

          ::v-deep .el-input__icon {
            line-height: 24px !important;
          }

          ::v-deep .el-input__prefix {
            left: 0;
          }
        }

        .el-checkbox {
          // width: 104px;
          margin-bottom: 4px;
          margin-right: 0;
        }
      }
    }

    .tip {
      margin: 16px 24px 24px 24px;
      font-weight: bold;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }

    .footer {
      margin: 0 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      button {
        width: 82px !important;
        height: 32px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        // cursor: pointer;
        line-height: 0;
      }

      button:nth-child(2) {
        margin-left: 16px;
        // color: #ffffff;
        // background: #106ebe;
      }
    }
  }
}

.w-50 {
  width: 200px;
  display: inline-block
}

.orange {
  ::v-deep .el-input__inner {
    background-color: #FEDDB1;
  }
}

.pl20 {
  ::v-deep .el-input__inner {
    width: 120px;
    height: 24px;
    padding-right: 5px;
    padding-left: 25px !important;
  }
}
</style>
